import React from 'react'
// 引入Route组件
import { Route, Link } from 'react-router-dom'
import Home from './pages/Home'
import Detail from './pages/Detail'
// 需求: 要实现一个单页面应用.一个首页,一个详情页
export default function App() {
  return (
    <div>
      {/* Link的作用: 修改浏览器地址栏的路径,但是不发送请求 */}
      <Link to="/home">首页</Link>
      <Link to="/detail">详情页</Link>
      {/* <Home></Home>
      <Detail></Detail> */}
      {/* 作用: 定义前端路由规则.并且Route写在哪里,对应的组件就渲染在哪里 */}

      {/* 
        匹配规则: 

          模糊匹配(默认): pathname要以path开头(以/为分割,分段比较)
          pathname: 指的是浏览器地址栏中的路径
          path 就是Route组件的path 

          假设: 
          pathname: /abc/d/e 

          path: /a  不行
          path: /    行
          path: /abcd 不行
          path: /abc/d 行
          path: /abc/de 不行
          path: /abc/d/e 行

          精确匹配: 
          pathname要和path一致

          给Route组件添加属性exact,则当前Route变成精确匹配.没加的还是模糊匹配
      
      */}
      {/* 默认路由 */}
      <Route path="/" component={Home} exact></Route>
      <Route path="/home" component={Home}></Route>
      <Route path="/detail" component={Detail}></Route>

      {/* <Route path="/abc/d" component={Detail}></Route> */}
    </div>
  )
}
